<template>
  <div class="relative pdf-container" style="overflow: hidden">
    <div class="header-container" v-if="!fetching">
      <div class="header-control" id="control-header">
        <div class="right">
          <a-button @click="goBack">{{ $t("btnText.back") }}</a-button>
          <a-button type="primary" @click="generatePDF">{{
            $t("btnText.create_pdf")
          }}</a-button>
        </div>
      </div>
    </div>
    <template v-if="pdfType">
      <JournalPDF ref="JournalPDFRef" v-if="pdfType == 'journal'" />
      <ResumePDF ref="ResumePDFRef" v-if="pdfType == 'resume'" />
    </template>
    <div
      class="loading-container"
      :style="{ height: ScreenHeight }"
      v-if="fetching"
    >
      <Skeleton width="100%" height="100%" class="skeleton"></Skeleton>
      <LoadingOutlined class="loading-icon" />
    </div>
    <div id="generate-loading" v-if="generating" ref="generateLoadingRef">
      <svg
        width="81px"
        height="81px"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
        class="lds-bricks"
      >
        <rect
          ng-attr-fill="{{config.c1}}"
          ng-attr-x="{{config.x}}"
          ng-attr-y="{{config.x}}"
          ng-attr-width="{{config.w}}"
          ng-attr-height="{{config.w}}"
          ng-attr-rx="{{config.radius}}"
          ng-attr-ry="{{config.radius}}"
          fill="#ff7c81"
          x="21.5"
          y="21.5"
          width="25"
          height="25"
          rx="3"
          ry="3"
        >
          <animate
            attributeName="x"
            calcMode="linear"
            values="21.5;53.5;53.5;53.5;53.5;21.5;21.5;21.5;21.5"
            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1"
            dur="1.5"
            begin="-1.375s"
            repeatCount="indefinite"
          ></animate>
          <animate
            attributeName="y"
            calcMode="linear"
            values="21.5;53.5;53.5;53.5;53.5;21.5;21.5;21.5;21.5"
            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1"
            dur="1.5"
            begin="-1s"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect
          ng-attr-fill="{{config.c2}}"
          ng-attr-x="{{config.x}}"
          ng-attr-y="{{config.x}}"
          ng-attr-width="{{config.w}}"
          ng-attr-height="{{config.w}}"
          ng-attr-rx="{{config.radius}}"
          ng-attr-ry="{{config.radius}}"
          fill="#ffec58"
          x="21.5"
          y="53.5"
          width="25"
          height="25"
          rx="3"
          ry="3"
        >
          <animate
            attributeName="x"
            calcMode="linear"
            values="21.5;53.5;53.5;53.5;53.5;21.5;21.5;21.5;21.5"
            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1"
            dur="1.5"
            begin="-0.875s"
            repeatCount="indefinite"
          ></animate>
          <animate
            attributeName="y"
            calcMode="linear"
            values="21.5;53.5;53.5;53.5;53.5;21.5;21.5;21.5;21.5"
            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1"
            dur="1.5"
            begin="-0.5s"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect
          ng-attr-fill="{{config.c3}}"
          ng-attr-x="{{config.x}}"
          ng-attr-y="{{config.x}}"
          ng-attr-width="{{config.w}}"
          ng-attr-height="{{config.w}}"
          ng-attr-rx="{{config.radius}}"
          ng-attr-ry="{{config.radius}}"
          fill="#7cd7ff"
          x="53.5"
          y="42.919"
          width="25"
          height="25"
          rx="3"
          ry="3"
        >
          <animate
            attributeName="x"
            calcMode="linear"
            values="21.5;53.5;53.5;53.5;53.5;21.5;21.5;21.5;21.5"
            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1"
            dur="1.5"
            begin="-0.375s"
            repeatCount="indefinite"
          ></animate>
          <animate
            attributeName="y"
            calcMode="linear"
            values="21.5;53.5;53.5;53.5;53.5;21.5;21.5;21.5;21.5"
            keyTimes="0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1"
            dur="1.5"
            begin="0s"
            repeatCount="indefinite"
          ></animate>
        </rect>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import {
  defineAsyncComponent,
  nextTick,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  provide,
  ref,
} from "vue";
const JournalPDF = defineAsyncComponent(() => import("./journal/index.vue"));
const ResumePDF = defineAsyncComponent(() => import("./resume/index.vue"));
import { postDownloadPdfCount } from "../../../api/member";
import { message } from "ant-design-vue";

type PDF_Type = "journal" | "resume";
const goBack = () => {
  goto(-1);
};

const route = useRoute();
const generating = ref(false);
const fetching = ref(true);
provide("fetching", fetching);
provide("generating", generating);

const generateLoadingRef = ref<HTMLElement | undefined>();
watch(generating, (newValue) => {
  if (newValue) {
    window.scrollTo({ top: 0 });
    document.documentElement.style.height = window.innerHeight + "px";
    document.documentElement.style.overflow = "hidden";
  } else {
    document.documentElement.style.height = "auto";
    document.documentElement.style.overflow = "auto";
  }
});

const pdfType = ref<PDF_Type | string>();
const pdfTypeList = ["journal", "resume"];

const JournalPDFRef = ref();
const ResumePDFRef = ref();
const generatePDF = () => {
  if (pdfType.value == "journal") JournalPDFRef.value.generatePDF();
  if (pdfType.value == "resume") ResumePDFRef.value.generatePDF();
};

onBeforeMount(async () => {
  let type = (route.query.pdf as string) || "";
  if (!pdfTypeList.includes(type)) return goto("/");
  pdfType.value = type as PDF_Type;
});

const ScreenHeight = ref("");

const setScreenHeight = () => {
  ScreenHeight.value = window.innerHeight + "px";
};

onMounted(() => {
  setScreenHeight();
});
</script>

<style>
body {
  line-height: normal;
}
</style>
<style scoped lang="less">
#generate-loading {
  position: fixed;
  inset: 0;
  display: grid;
  z-index: 999;
  background-color: rgba(92, 91, 91, 0.5);
  align-items: center;
  justify-items: center;
  svg {
    transform: scale(2);
  }
}

.header-container {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9;
  .right {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    padding-top: 20px;
  }
}
.loading-container {
  min-height: 100vh;
  position: relative;
  .skeleton {
    position: absolute;
    top: 0;
    left: 0;
  }
  display: flex;
  align-items: center;
  justify-content: center;
  .loading-icon {
    font-size: 80px;
  }
}
@media screen and (max-width: 768px) {
  .loading-icon {
    font-size: 160px !important;
  }
  #generate-loading {
    svg {
    }
  }
  .pdf-container {
    display: flex;
    flex-direction: column-reverse;
  }
  .header-container {
    position: static;
    padding: 82px;
    height: 246px;
    box-sizing: content-box;
    .header-control {
      padding: 82px;
      position: fixed;
      background-color: #fff;
      border-top: 1px solid #eee;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .ant-btn {
      flex: 1;
    }
  }
}
</style>
